<template>
	<div>
		<div class="topTitle">批量导入</div>
		<el-form :model="form" :rules="rules" ref="form" label-width="80px">
			<el-form-item label="题目类型" prop="type">
				<el-radio-group v-model="form.type" @change="onChange">
					<el-radio v-for="(type, index) in typesData" :key="index" :label="type.id" :value="type.id"
						class="width130 margin-top10 height25">{{ type.name }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="题目分类" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
				<div class="row-me row-center flex-wrap">
					<el-form-item prop="categoryId3" label="章节分类" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
						<el-select v-model="form.categoryId3" placeholder="章节分类" clearable class="margin-right10"
							@change="onCategoryChange3">
							<el-option v-for=" item in categoryId3Data" :key="item.id" :label="item.name" :value="item.id"
								:style="{'color': item.color?item.color:''}"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="categoryId2" label="模块分类" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
						<el-select v-model="form.categoryId2" placeholder="模块分类" clearable class="margin-right10"
							@change="onCategoryChange2">
							<el-option v-for="item in categoryId2Data" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="categoryId1" label="综合分类" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
						<el-select filterable v-model="form.categoryId1" placeholder="综合分类" clearable @change="onCategoryChange1">
							<el-option v-for="item in categoryId1Data" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form-item>
			<el-form-item label="题目属性" prop="properType" label-width="80">
				<el-radio-group v-model="form.properType">
					<el-radio :label="1">普通题</el-radio>
					<el-radio :label="2">作废题</el-radio>
					<el-radio :label="3">争议题</el-radio>
					<el-radio :label="4">重复题</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="题目标签">
				<el-select v-model="form.labelIds" multiple filterable placeholder="请选择题目标签" class="width500"
					@change="onTagChange">
					<el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="批量题目" prop="content">
				<el-input type="textarea" rows="18" class="width60vw" v-model="form.content"></el-input>
			</el-form-item>
			<el-form-item label=" ">
				<div class="row-me row-center">
					<el-button type="primary" @click="clickBatchImport">批量导入</el-button>
					<el-button @click="clickClear">清空</el-button>
					<el-button @click="clickReturn">返回</el-button>
					<el-button type="text" @click="formatVisible=true">格式说明</el-button>
				</div>
			</el-form-item>
		</el-form>

		<el-dialog title="确认导入结果" :close-on-click-modal="false" :visible.sync="visible" width="60%" @close="resultArr=[]">
			<div class="font-size16 color252525">
				<div class="row-me row-center flex-wrap">
					<div class="margin-right20">题型：{{form.typeName||''}}</div>
					<div class="margin-right20">分类：{{form.category1||''}}/{{form.category2||''}}/{{form.category3||''}}</div>
					<div class="margin-right20">题目属性：
						<span v-if="form.properType==1">普通题</span>
						<span v-else-if="form.properType==2">作废题</span>
						<span v-else-if="form.properType==3">争议题</span>
						<span v-else-if="form.properType==4">重复题</span>
					</div>
					<div>
						标签：<el-tag v-for="(item,index) in tagArr" :key="index" class="margin-right10">{{item||''}}</el-tag>
					</div>
				</div>
				<el-button class="margin-bottom20 margin-top20" @click="clickDetection" type="primary">一键检测重复度</el-button>
				<div>
					<div class="row-me row-center">
						<div class="flex1">题目</div>
						<div class="width200 align-center">操作</div>
					</div>
					<div class="margin-top10 marin-bottom20 line-grey-heng-dashed"></div>
					<div v-for="(item,index) in resultArr" :key="index">
						<div class="row-me row-center">
							<div class="flex1 color252525 font-size16">
								<p>{{index+1}}.{{item.title}}</p>
								<div v-for="(val,i) in item.optionList" :key="i">
									<div class="margin-top5">{{val.title}}.{{val.content}}</div>
								</div>
								<p>答案：<span v-html="item.answer"></span></p>
								<p>解析：<span v-html="item.textExplain"></span></p>
							</div>
							<div class="row-me center-all width200">
								<el-button type="text" class=" margin-right20" @click="handleEdit(item,index)">编辑</el-button>
								<el-popconfirm title="确定移除吗？" @confirm="resultArr.splice(index,1)" class="margin-right20">
									<el-button slot="reference" type="text">移除</el-button>
								</el-popconfirm>
								<el-button type="text" v-if="isShow"
									@click="clickShow(item)">查看({{item.respeatedList?item.respeatedList.length:0}})</el-button>
							</div>
						</div>
						<div class="margin-top20 marin-bottom20 line-grey-heng-dashed"></div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确认导入</el-button>
			</span>
		</el-dialog>

		<el-dialog title="查看重复试题" :visible.sync="repeatVisible" width="600px">
			<div>
				<div class="row-me margin-bottom20">
					<el-button :type="btnIndex==1?'primary':''" class="margin-right30" @click="clickBtn(1)">全部</el-button>
					<el-button :type="btnIndex==3?'primary':''" class="margin-right30" @click="clickBtn(3)">系统发布</el-button>
					<el-button :type="btnIndex==2?'primary':''" class="margin-right30" @click="clickBtn(2)">机构发布</el-button>
				</div>
				<div>
					<div class="row-me row-center">
						<div class="flex">题目</div>
						<div class="width200 align-center">操作</div>
					</div>
					<div class="margin-top10 marin-bottom20 line-grey-heng-dashed"></div>
					<div>
						<div class="row-me row-center">
							<div class="flex1"></div>
							<div class="row-me width200">
								<el-button type="text">编辑</el-button>
							</div>
						</div>
						<div class="margin-top20 marin-bottom20 line-grey-heng-dashed"></div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="repeatVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 格式说明 -->
		<el-dialog title="格式说明" :visible.sync="formatVisible" width="600px">
			<div>
				{{formatInfo.value||''}}
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="formatVisible = false">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="70%">
			<examQuestions ref="examQuestions" @handleOk="handleOk"></examQuestions>
		</el-dialog>

		<repeatedQuestions ref="repeatedQuestions"></repeatedQuestions>
	</div>
</template>

<script>
	import examQuestions from "@/components/examQuestions"
	import repeatedQuestions from "@/components/repeatedQuestions"
	export default {
		name: 'batchImport',
		props: ['categoryId1Data', 'categoryId2Data', 'categoryId3Data', 'typeList', 'tagList'],
		components: {
			examQuestions,
			repeatedQuestions
		},
		data() {
			return {
				form: {},
				rules: {
					type: {
						required: true,
						message: '请选择题目类型',
						trigger: 'change'
					},
					properType: {
						required: true,
						message: '请选择题目属性',
						trigger: 'change'
					}
				},
				typesData: [],
				rules: {
					type: {
						required: true,
						message: '请选择题目类型',
						trigger: 'change'
					},
					properType: {
						required: true,
						message: '请选择题目属性',
						trigger: 'change'
					},
					content: {
						required: true,
						message: '请输入批量题目',
						trigger: 'blur'
					}
				},
				visible: false,
				typeName: '',
				isShow: false,
				repeatVisible: false,
				btnIndex: 0,
				formatVisible: false,
				resultArr: [],
				content: '',
				optionArr: ['A', 'B', 'C', 'D', 'E', 'F'],
				editVisible: false,
				index: 0,
				tagArr: [],
				formatInfo: {},
				indexArr: [],

			}
		},
		mounted() {
			this.indexArr = []
			for (var i = 0; i < 20; i++) {
				this.indexArr.push((i + 1) + '.')
				this.indexArr.push((i + 1) + '、')
				this.indexArr.push((i + 1) + '：')
				this.indexArr.push((i + 1) + ':')
			}
			this.getType()
			this.getByKey()
		},
		methods: {
			//一键检测重复度
			clickDetection() {
				for (let item of this.resultArr) {
					this.getSimilarity(item)
				}
				console.log(this.resultArr, this.form, "resultArr")
				this.isShow = true
			},
			getSimilarity(item) {
				let option = {
					isCorrect: false,
					optionNo: '',
					content: '',
					type: 'text'
				};
				option = JSON.stringify(item.optionList);
				option = encodeURIComponent(option);
				this.$get('/admin/question/similarity', {
					title: item.title,
					questionType: item.type,
					option,
					isChild: false
				}).then(res => {
					if (res.code == 1000) {
						if (res.data.length != 0) {
							this.$set(item, 'respeatedList', res.data)
						}
					}
				}).catch(() => {

				})
			},
			clickShow(item) {
				console.log(item, "itemmm")
				this.$refs.repeatedQuestions.show('batchImport', item)
			},
			//获取格式
			async getByKey() {
				const res = await this.$get('/admin/config/getByKey', {
					key: 'question_type_config'
				})
				if (res.code == 1000) {
					this.formatInfo = res.data
				}
			},
			onTagChange(arr) {
				this.tagArr = []
				if (arr && arr.length != 0) {
					for (let item of this.tagList) {
						for (let val of arr) {
							if (item.id == val) {
								this.tagArr.push(item.name)
							}
						}
					}
				}
			},
			handleOk(data) {
				if (data) {
					this.resultArr[this.index] = data
				}
				this.editVisible = false
			},
			// 编辑
			handleEdit(row, index) {
				this.index = index
				this.editVisible = true
				setTimeout(() => {
					this.$refs.examQuestions.show(row, 3)
				})
			},
			onChange(val) {
				for (let item of this.typesData) {
					if (item.id == val) {
						this.form.typeName = item.name
					}
				}
			},
			//返回
			clickReturn() {
				this.$emit('importOk')
			},
			//清空
			clickClear() {
				this.form = {}
				this.resultArr = []
			},
			clickBtn(index) {
				this.btnIndex = index
			},
			//确认导入
			async handleSave() {
				let roleType = this.page == 'train' ? 2 : 1
				let isChild = this.page == 'smallQuestionList' ? true : false
				for (let item of this.resultArr) {
					item.labelIds = item.labelIds.toString()
					item.answerN = ''
					item.roleType = roleType
					item.isChild = isChild
				}
				const res = await this.$post('/admin/question/importQuestionsAll', this.resultArr)
				if (res.code == 1000) {
					this.visible = false
					this.$message.success('批量导入成功')
				}
			},
			clickBatchImport() {

				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.content = this.form.content
						this.resultArr = []
						this.resultArr = this.parseTextToQuestions(this.content)
						for (let item of this.resultArr) {
							item.type = this.form.type
							item.categoryId1 = this.form.categoryId1
							item.categoryId2 = this.form.categoryId2
							item.categoryId3 = this.form.categoryId3
							item.properType = this.form.properType
							item.labelIds = this.form.labelIds
						}
						this.visible = true

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//截取题干
			parseTextToQuestions(text) {
				const parts = text.split(/(?=\d+\.)/).filter((part) => part.trim() !== "");
				let questions = parts.map((part) => {
					var index = part.indexOf('A.')
					var optionIndex = part.indexOf('答案')
					var title;
					if (index != -1) {
						title = part.substring(0, index)
						for (let item of this.indexArr) {
							if (title.indexOf(item) != -1) {
								var titileIndex = title.indexOf(item)
								title = part.substring(titileIndex + 2, index)
							}
						}
					} else {
						title = part.substring(0, optionIndex)
						for (let item of this.indexArr) {
							if (title.indexOf(item) != -1) {
								var titileIndex = title.indexOf(item)
								title = part.substring(titileIndex + 2, optionIndex)
							}
						}
					}
					var option = part.substring(index - 1, optionIndex).split('\n').filter(item => item)
					var optionList = []
					for (let item of option) {
						optionList.push({
							title: item.split('.')[0],
							content: item.split('.')[1]
						})
					}
					var answerIndex = part.indexOf('解析')
					var answer = part.substring(optionIndex - 1, answerIndex).trim().split('：')[1]
					var textExplain = part.substring(answerIndex - 1).trim().slice(3)
					return {
						title,
						optionList,
						answer,
						textExplain
					}
				});
				return questions.filter((q) => q.title);
			},
			getType() {
				let arr = this.typeList
				for (let item of arr) {
					if (item.name == '单选题' || item.name == '多选题' || item.name == '判断题') {
						this.typesData.push(item)
					}
				}
			},
			onCategoryChange1(id) {
				this.categoryId1Data.find((item) => {
					if (item.id == id) {
						this.form.category1 = item.name
					}
				})
			},
			onCategoryChange2(id) {
				this.categoryId2Data.find((item) => {
					if (item.id == id) {
						this.form.category2 = item.name
					}
				})
			},
			onCategoryChange3(id) {
				this.categoryId3Data.find((item) => {
					if (item.id == id) {
						this.form.category3 = item.name
					}
				})
			},
		}
	}
</script>

<style>
</style>